<template>
	<view class="me-content">
		<view class="me-user-info" @click="hanlders('me')">
			<view class="">
				<view class="me-user-info-name">
					{{userInfo.full_name?userInfo.full_name:''}}
					<text style="font-weight: 500;font-size: 10px;margin:0 5px;">{{userInfo.city}}</text>
					<!-- member_card_id  为0 或者空时 为非会员 其他都是会员 -->
					<!-- <image v-if="userInfo.member_card_id=='0' || userInfo.member_card_id==''" class="me-user-info-img"
						src="../../../static/me/noVIP.png" mode="scaleToFill"></image> -->
					<image class="me-user-info-img" :src="userInfo.member_card.icon_url" mode="scaleToFill">
					</image>
				</view>
				<view class="">
					{{userInfo.company_name?userInfo.company_name:''}}
				</view>
				<view class="">
					注册时长：{{userInfo.timename?userInfo.timename:0}}
				</view>
				<view class="" style="margin-top: 10px;">
					<image :src="userInfo.identity_icon" mode="scaleToFill" style="width: 10px; height: 10px;"></image>
				</view>
			</view>
			<view class="">
				<!-- userInfo.member_card.cover_url -->
				<image class="me-user-img" :src="userInfo.imageurl" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="me-vip" v-if="userInfo.member_card_id=='0' || userInfo.member_card_id==''">
			<view class="me-vip-content">
				<view class="me-vip-content-first">
					<image class="me-vip-img" src="../../../static/me/VIP.png" mode="scaleToFill"></image>
					<text>尊享专属权益</text>
				</view>
				<view class="" @click="hanlders('vip')">
					了解更多 >
				</view>
			</view>
		</view>
		<view class="me-vip1" v-else>
			<view class="me-vip1-content" @click="hanlders('vip')">
				<view class="me-vip1-content-first">
					<image class="me-vip1-img" src="../../../static/vip/vip2.png" mode="scaleToFill"></image>
					<text style="font-size: 13px;">{{userInfo.membership}} 到期</text>
				</view>
				<view style="font-size: 13px;font-weight: bold;" class="" >
					立即续费 >
				</view>
			</view>
		</view>
		<view class="me-use">
			<view class="me-use-title">
				常用功能
				<image class="me-use-title-img" src="../../../static/bac-small.png" mode=""></image>
			</view>
			<view class="me-use-content">
				<view class="" @click="hanlders('xc')">
					<image class="me-use-content-img" src="../../../static/me_xunche.png" mode="scaleToFill"></image>
					<view class="">
						我的寻车
					</view>
				</view>
				<view class="" @click="hanlders('bj')">
					<image class="me-use-content-img" src="../../../static/me_baojia.png" mode="scaleToFill"></image>
					<view class="">
						我的报价
					</view>
				</view>
				<view class="" @click="hanlders('sc')">
					<image class="me-use-content-img" src="../../../static/me_shoucang.png" mode="scaleToFill"></image>
					<view class="">
						我的收藏
					</view>
				</view>
				<!-- :custom-style="{backgroundColor:'#FF3000'}" -->
				<uni-badge type="error"  :offset="[15, -2]" absolute="rightTop">
					<view class="" @click="hanlders('gz')">
						<image class="me-use-content-img" src="../../../static/me_guanzhu.png" mode="scaleToFill">
						</image>
						<view class="">
							我的关注
						</view>
					</view>
				</uni-badge>
			</view>
		</view>
		<view class="me-use me-basics">
			<view class="me-use-title">
				基础功能
				<image class="me-use-title-img" src="../../../static/bac-small.png" mode=""></image>
			</view>
			<view class="me-use-content">
				<view class="" @click="hanlders('ts')">
					<image class="me-use-content-img" src="../../../static/me_tongshi.png" mode="scaleToFill"></image>
					<view class="">
						我的同事
					</view>
				</view>
				<view class="" @click="hanlders('shbb')">
					<image class="me-use-content-img" src="../../../static/me_baobiao.png" mode="scaleToFill">
					</image>
					<view class="">
						数据报表
					</view>
				</view>
				<template v-if="userInfo.person_auth.examine==0 || userInfo.company_auth.examine==0">
					<uni-badge type="error" text="未认证" :offset="[15, -2]" absolute="rightTop">
						<view class="" @click="hanlders('rz')">
							<image class="me-use-content-img" src="../../../static/me_renzheng.png" mode="scaleToFill">
							</image>
							<view class="">
								身份/认证公司
							</view>
						</view>
					</uni-badge>
				</template>
				<template v-else>
					<view class="" @click="hanlders('rz')">
						<image class="me-use-content-img" src="../../../static/me_renzheng.png" mode="scaleToFill">
						</image>
						<view class="">
							身份/认证公司
						</view>
					</view>
				</template>



				<view class="" @click="hanlders('sz')">
					<image class="me-use-content-img" src="../../../static/me/setting.png" mode="scaleToFill"></image>
					<view class="">
						设置
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		data() {
			return {
				userInfo: {
					member_card: {},
					person_auth: {},
					company_auth: {}
				}
			}
		},
		methods: {
			hanlders: function(type) {
				const that = this;
				switch (type) {
					case 'me':
						uni.navigateTo({
							url: "/pages/user/me/meProfile",
							success: function(res) {
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('userInfo', {
									data: that.userInfo
								})
							}
						})
						break;
					case 'vip':
						uni.navigateTo({
							url: "/pages/user/vip/vipHome/vipHome"
						})
						break;
					case 'rz':
						uni.navigateTo({
							url: "/pages/user/auth/auth",
							success: function(res) {
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('userInfo', {
									data: that.userInfo
								})
							}
						})
						break;
					case 'shbb':
						console.log("数据报表")
						uni.navigateTo({
							url: "/pages/home/newCar/dataChart/dataChart"
						})
						break;
					case 'xc':
						console.log("寻车")
						uni.navigateTo({
							url: '/pages/home/secondhandCar/meSearchCar/meSearchCarList/meSearchCarList'
						})
						break;
					case 'bj':
						console.log("报价")
						uni.navigateTo({
							url:"/pages/home/offer/myOfferList"
						})
						break;
					case 'sc':
						console.log("收藏")
						uni.navigateTo({
							url: '/secondhandCar/meSave/meSave'
						})
						break;
					case 'gz':
						uni.navigateTo({
							url: "/main/myFollow/myFollow"
						})
						break;
					case 'ts':
						uni.showToast({
							title: "敬请期待"
						})
						break;
					case 'sz':
						uni.navigateTo({
							url: "/pages/user/settings/settings"
						})
						break;
				}

			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "个人中心",
			})
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#2D56C5',
			})
			let value = uni.getStorageSync('login');
			if (value === '') {
				uni.navigateTo({
					url: '/pages/login/login',
				})
			} else {
				let id = value.id;
				var that = this
				// 测试 897D7EDA-4FAB-4763-6420-C8B605E43661
				// getUserInfo("897D7EDA-4FAB-4763-6420-C8B605E43661")
				getUserInfo(id).then(res => {
						console.log("用户信息=111==", res);
						if (res.code == 0) {
							that.userInfo = res.data
							if (res.data.member_card_id != '0') {
								that.memberCard = res.data.member_card
								if (that.memberCard) {
									that.memberLevel = res.data.member_card.name
									that.memberLevelImgUrl = res.data.member_card.cover_url
								}
							}
							uni.setStorageSync("login", that.userInfo)
						} else {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					.catch(e => {})
			}
		},
		mounted() {
			
		},
	}
</script>
<style lang="scss" scoped>
	.me-content {
		padding: 10px;
		width: 100%;
		height: 100%;
		font-size: 12px;
	}

	.me-user-info {
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		line-height: 20px;

		&-name {
			font-size: 20px;
			font-weight: bold;
			line-height: 25px;
		}

		&-img {
			width: 45px;
			height: 17px;
			margin-left: 8px;
		}
	}

	.me-user-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.me-vip1 {
		display: flex;
		justify-content: center;
		margin-top: 10px;
		color: #FFF5CC;

		&-content {
			width: 97%;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(0deg, #2C3341, #8890A4);
			height: 60px;
			align-items: center;
			padding: 20px 10px;

			&-first {
				display: flex;
				align-items: center;
			}
		}

		&-img {
			width: 51px;
			height: 16px;
			margin-right: 15px;
		}
	}

	.me-vip {
		display: flex;
		justify-content: center;
		margin-top: 10px;
		color: #FF8800;

		&-content {
			width: 97%;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(0deg, #FFCC73, #FFECCA);
			height: 60px;
			align-items: center;
			padding: 20px 10px;

			&-first {
				display: flex;
				align-items: center;
			}
		}

		&-img {
			width: 51px;
			height: 16px;
			margin-right: 15px;
		}
	}

	.me-use {
		background-color: #fff;
		padding: 20px 10px;
		border-radius: 10px;

		&-title {
			font-size: 15px;
			font-weight: bold;
			position: relative;
			z-index: 10;
			margin-bottom: 30px;

			&-img {
				position: absolute;
				top: 0px;
				left: -5px;
				width: 80px;
				height: 30px;
				opacity: 0.6;
			}
		}

		&-content {
			display: flex;
			justify-content: space-between;
			text-align: center;

			&-img {
				width: 20px;
				height: 20px;
				margin-bottom: 10px;
			}
		}
	}

	.me-basics {
		margin-top: 20px;
	}
</style>